<style lang="sass" scoped> 
    .time_common{
        overflow: hidden;
        .item{
            display: inline-block;
            margin-right:10px;
            input{
                border-radius:3px;
            }
        }
    }
</style>
<template>
   <div class="time_common">
        <div class="item"><span v-if="datas.isShowTitle" v-text="datas.titleBeginText"></span><input :placeholder="datas.isShowPlaceholder?'选择开始时间':''" class="laydate-icon input-model" id="{{datas.beginId}}" type="text"></div>
        <div v-if="!datas.isOneTime" class="item"><span v-if="datas.isShowTitle" v-text="datas.titleEndText"></span><input :placeholder="datas.isShowPlaceholder?'选择开始时间':''" class="laydate-icon input-model" id="{{datas.endId}}" type="text"></div>
   </div>
</template>
<script type="es6">
    export default{
        props:{
            datas:{
                type:Object,
                default:{},
                twoWay:true
            },
            begin:{
                type:null,
                default:null,
                twoWay:true
            },
            end:{
                type:null,
                default:null,
                twoWay:true
            }
        },
        beforeCompile(){
            var config={
                beginId:'beginId',
                endId:'endId',
                isOneTime:false, //是否只需要一个时间
                isShowPlaceholder:true,  //是否展示placeholder
                isShowTitle:false, //是否显示title
                titleBeginText:'开始时间：', //title 开始 文字
                titleEndText:'结束时间：', //title 结束 文字
                event: 'click', //触发事件
                format: 'YYYY-MM-DD', //日期格式
                istime: false, //是否开启时间选择
                isclear: true, //是否显示清空
                istoday: true, //是否显示今天
                issure: true, //是否显示确认
                festival: true, //是否显示节日
                min: '1900-01-01 00:00:00', //最小日期
                max: '2099-12-31 23:59:59', //最大日期
                start: laydate.now(),  //开始日期
                fixed: false, //是否固定在可视区域
                zIndex: 10000, //css z-index
                effectivetime:null,  //默认不限制范围 限制时传整数 例如:30  表示只能选择开始后的30天
                skin:'default',   //可选参数  default,dahong,danlan,molv
            };
            // 处理时间格式
            if(config.istime) config.format='YYYY-MM-DD hh:mm:ss';
            // 处理继承
            for(var i in config){
                for(var k in this.datas){
                    if(i==k){
                        config[k]=this.datas[k]
                    }
                }
            }
            this.datas=config;
        },
        ready(){
            // 起始时间如果有就先赋值
            if(this.begin){
                if(this.datas.istime){
                    $('#'+this.datas.beginId).val(new Date(this.begin).date('y-m-d h:i:s'));
                }else{
                    $('#'+this.datas.beginId).val(new Date(this.begin).date('y-m-d'));
                }
            };
            if(!this.datas.isOneTime){
                if(this.end){
                    if(this.datas.istime){
                        $('#'+this.datas.endId).val(new Date(this.end).date('y-m-d h:i:s'));
                    }else{
                        $('#'+this.datas.endId).val(new Date(this.end).date('y-m-d'));
                    }
                }; 
            };
            switch(this.datas.skin){
                case 'dahong':
                    require('common/lib/laydate/skins/dahong/laydate.css');
                    break;
                case 'danlan':
                    require('common/lib/laydate/skins/danlan/laydate.css');
                    break;  
                case 'molv':
                    require('common/lib/laydate/skins/molv/laydate.css');
                    break;     
            }
            //时间筛选器
            var begin={
                elem: '#'+this.datas.beginId,
                event: this.datas.event, //触发事件
                format: this.datas.format, //日期格式
                istime: this.datas.istime, //是否开启时间选择
                isclear:this.datas.isclear,
                istoday: this.datas.istoday, //是否显示今天
                issure: this.datas.issure, //是否显示确认
                festival: this.datas.festival, //是否显示节日
                min: this.datas.min, //最小日期
                max: this.datas.max, //最大日期
                start: this.datas.start,  //开始日期
                fixed: this.datas.fixed, //是否固定在可视区域
                zIndex: this.datas.zIndex, //css z-index
                choose:((data)=>{
                    this.begin=data?Date.parse(data):data;
                    if(!this.datas.isOneTime){
                        if(Date.parse(data)>this.end) {
                            this.end="";
                            $('#'+this.datas.endId).val(this.end);
                        }
                        end.min = data
                        end.start = data 
                        // 限制时间范围
                        if(this.datas.effectivetime){
                            var beginTimes=Date.parse(data);
                            var times = this.datas.effectivetime*24*3600000;
                            end.max=new Date(beginTimes+times).date('y-m-d');
                        };
                    };    
                })
            };
            var end={
                elem: '#'+this.datas.endId,
                event: this.datas.event, //触发事件
                format: this.datas.format, //日期格式
                istime: this.datas.istime, //是否开启时间选择
                isclear:this.datas.isclear,
                istoday: this.datas.istoday, //是否显示今天
                issure: this.datas.issure, //是否显示确认
                festival: this.datas.festival, //是否显示节日
                min: this.datas.min, //最小日期
                max: this.datas.max, //最大日期
                start: this.datas.start,  //开始日期
                fixed: this.datas.fixed, //是否固定在可视区域
                zIndex: this.datas.zIndex, //css z-index
                choose:((data)=>{
                    this.end=data?Date.parse(data)+86400000:data;
                })
            };
            laydate(begin)
            if(!this.datas.isOneTime){
               laydate(end) 
           };
            
        }
    }
</script>
<style>
   
</style>